<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
	<link rel="stylesheet" href="/css/elementui/index.css">
	<link rel="stylesheet" href="/css/exam/css/style.css">
	<link rel="stylesheet" href="/iconfont/iconfont.css">
    <style>
		#app .button a {
		  text-decoration: none;
		  color: aliceblue;
		}
    </style>
    <style type="text/css">
		.el-table th.el-table__cell>.cell {
		  text-align: center !important;
		}
    </style>
</head>

<body>
  <!-- 课程管理 -->
  <div id="app">
  <div class="p-30">
      {{ csrf_field() }}
	  <el-row type="flex" class="row-bg" justify="space-between">
      <el-form>
	  	 <a href="{{route('admin.examview.courseadd')}}" style="display:block;color:#fff;text-decoration:none"><el-button type="primary">添加课程</el-button></a>
	  </el-form>
		  <el-form :inline="true" :model="forminline">
			<el-form-item label="分&ensp;&ensp;类">
				<el-select v-model="forminline.type" placeholder="类&ensp;&ensp;型" style="width: 330px;">
					<el-option v-for="(v,k,index) in cidData" :key="index" :label="v" :value="k">
					</el-option>
				</el-select>
			</el-form-item>
			<el-button type="primary" @click="searchput()" type="primary">查&ensp;&ensp;询</el-button>
		  </el-form>
	  </el-row>

      <!-- Form Page -->
      <div class="fromPage">
        <el-table :header-cell-style="{ background: '#f1f2f9' }" :fit="true" ref="multipleSelection" :data="indexData" tooltip-effect="dark" style="width: 100%"  v-loading="loading">
          <el-table-column prop="id" label="ID" show-overflow-tooltip width="120">
          </el-table-column>
          <el-table-column prop="videoName" label="名&ensp;&ensp;称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="资源地址" show-overflow-tooltip >
		     <template slot-scope="scope">  
				<a :href="'http://120.224.176.28:38111'+ scope.row.videoResources" target="_blank">@{{scope.row.videoResources}}</a >
			 </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发布时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="userName" label="作&ensp;&ensp;者" show-overflow-tooltip>
          </el-table-column>
          <el-table-column  label="分&ensp;&ensp;类" show-overflow-tooltip>
			  <template slot-scope="scope">
			  <span v-if="scope.row.type == 1">培训视频</span> 
				<span v-if="scope.row.type == 2">法律法规</span>           
				<span v-else-if="scope.row.type == 3">标准规范</span>           
				<span v-else-if="scope.row.type == 4">培训课件</span>           
			  </template>
          </el-table-column>
          <el-table-column label="操&ensp;&ensp;作" show-overflow-tooltip width="180">
            <template slot-scope="scope">            
              <el-button type="primary" size="mini" @click="handleEdit(scope.$index,scope.row)">编&ensp;&ensp;辑</el-button>
			   <el-button type="danger"  size="mini" @click.native.prevent="deleteRow(scope.$index, scope.row)">删&ensp;&ensp;除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <!-- 分页组件 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[10,20,50,100]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="count">
            </el-pagination>
        </div>

    <!--编辑抽屉-->
    <el-drawer title="编辑课程：" :visible.sync="showDrawer" :close-on-click-modal="false" size="35%">
      <el-form :model="formData" status-icon ref="formData" label-width="110px" class="demo-formData">
			<el-form-item label="token" prop="_token" style="width: 640px;display:none">
				<el-input v-model="formData._token"></el-input>
			</el-form-item>
        <el-form-item label="名称：" prop="videoName" style="width: 470px;">
          <el-input v-model="formData.videoName" @input="updateForce($event)"></el-input>
        </el-form-item>
		<el-form-item label="资源地址" prop="videoResources" style="width: 640px;">
		<div class="upload-content">
		        <el-upload
		            ref="uploadFile"
		            drag
		            action="/admin/upload/uploadAll?_token={{ csrf_token() }}"
		            :multiple="false"
		            :limit="1" 
		            accept=".jpg, .png, .ppt, .xlsx, .doc, docx, .xls"
		            :before-upload="beforeUpload"
		            :on-success="uploadSuccess"
		            :on-error="uploadError"
		            :on-exceed="uploadExceed"
					>
		            <i class="el-icon-upload"></i>
		            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		            <div class="el-upload__tip" slot="tip">不超过10M，支持文件格式有.jpg, .png, .ppt, .doc, docx, .xls .xlsx</div>
		        </el-upload>
		    </div>
		    <!--<div>@{{formData.videoResources}}</div>-->
		</el-form-item>
        <el-form-item label="类型" prop="type">
		<el-select v-model="formData.type" placeholder="请选择">
			<el-option label="培训视频" :value="1"></el-option>
			<el-option label="法律法规" :value="2"></el-option>
			<el-option label="标准规范" :value="3"></el-option>
			<el-option label="培训课件" :value="4"></el-option>
		</el-select>
		<!--
          <el-select v-model="formData.type" placeholder="类型" v-on:click.native="getciddata" @change="kk">
            <el-option v-for="(v,k,index) in cidData" :key="index" :label="v" :value="k">
            </el-option>
          </el-select>-->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="formValidate('formData')">提交</el-button>
          <el-button @click="cancelForm" style="margin-left: 75px;">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
    </div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
		formData: {
			id:'',
			videoName: '',
			videoResources: '',
			type: '',
			_token: '{{csrf_token()}}',
		},
        //抽屉相关
        showDrawer: false,
        loading: false,
        formLabelWidth: '80px',
        //控制loading加载
        loading: false,
        // select选中的值
        v: '',
        value: '',
        //select下拉框placeholder改变样式
        active: false,
        //表格左边分页
        menuLeftList: [],
        //编辑对话框显示与隐藏
        editDialogVisible: false,
        classify: [],
        indexData: {

        },
        forminline: {
          videoName: '',
        },
        multipleSelection: [],
        indexData: [], //题库列表数据
        loading: false,
        sels: [], //当前选框选中的值
		currentPage: 1, // 当前页码
		count: 10, // 总条数
		pageSize: 10,// 每页的数据条数
        cidData: {},
      }
    },
    computed: {
      // showStatus() {
      //   if (this.forminline.video_id) {
      //     return true
      //   }
      //   return false
      // },
    },
    created() {
  
      this.getResults()
      this.getciddata()
      this.updateForce()

    },
    updated() {
      //在数据更新的时候存进缓存

    },
    methods: {
		kk(){
			console.log(this.formData.type)
			},
      //对form表单进行强制更新操作，避免无法编辑表单的情况
      updateForce() {
        this.$forceUpdate();
      },
      //获取分类列表
      getciddata() {
        axios.post('/admin/video/status_all', {})
          .then(res => {
            this.cidData = res.data.data
            //  console.log('请求成功' + res);
            console.log('请求成功' + res.data.data);
          }).catch(error => {
            console.log('请求失败：' + error);
          })
      },
      //表格取消按钮
      async cancelForm() {
		await this.$refs.uploadFile.clearFiles()
        this.loading = false;
        this.showDrawer = false;

      },
      //编辑按钮
      handleEdit(index, row) {
        this.showDrawer = true
        this.formData.id = row.id
        this.formData.videoName = row.videoName
        this.formData.videoResources = row.videoResources
        this.formData.type = row.type
		this.formData._token = row._token
        this.updateForce()
		console.log('++++++',this.formData.type)
      },
      //抽屉保存
      formValidate(formName) {
        let id = this.formData.id;
        let videoName = this.formData.videoName;
        let videoResources = this.formData.videoResources;
        let type = this.formData.type;
        let _token = this.formData._token;
        axios.post('/admin/video/videosdo', {
            id: id,
            videoName: videoName,
            videoResources: videoResources,
            type: type,
            _token: _token
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '保存成功！'
              });
              this.showDrawer = false;
			  this.getResults()
			  this.$refs.uploadFile.clearFiles()

            } else {
              this.$message({
                type: 'info',
                message: '保存失败！'
              })
            }
          })
      },

      //查询按钮
      searchput() {
        this.currentPage = 1;
        this.getResults()
        console.log(this.forminline.videoName)
      },
      // 查询按钮
      getResults() {
        this.loading = true
        axios.get('/admin/video/dataList', {
            params: {
              limit: this.pageSize,
              page: this.currentPage,
              type: this.forminline.type
            }
          })
          .then(res => {
            console.log('请求成功：', res.data.data);
            this.indexData = res.data.data;
            this.count = res.data.count;
            this.loading = false;
            console.log(res.data)
          }).catch(error => {
            console.log('请求失败：' + error);
            this.loading = false;
          })
      },

      //删除
      deleteRow(index, rows) {
        this.$confirm('确认操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          axios.post('/admin/video/delete', {
              id: rows.id
            })
            .then(res => {
              this.getResults()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

          // 分页页码  
          handleSizeChange(val){
            console.log(`每页 ${val} 条`);
				    this.currentPage = 1;
				    this.pageSize = val;
            this.getResults()
          },
          handleCurrentChange(val){
            console.log(`当前页: ${val}`);
				    this.currentPage = val;
            this.getResults()
					  
          },
		  beforeUpload(file) {
		  	const { name, size } = file;
		  	const index = name.lastIndexOf('.');
		  	// 判断文件名是否有后缀，没后缀文件错误
		  	if(index === -1) {
		  		this.$notify.error({
		  			title: '错误',
		  			message: '文件错误，请重新上传！',
		  		});
		  		return false;
		  	}
		  	const fileType = name.substr(index + 1);
		  	const acceptFileTypes = ['jpg', 'png', 'ppt','doc', 'docx', 'xls','xlsx'];
		  	// 判断文件类型
		  	if(!acceptFileTypes.includes(fileType)) {
		  		this.$notify.error({
		  			title: '错误',
		  			message: '文件类型错误，请重新上传！',
		  		});
		  		return false;
		  	}
		  	// 判断文件大小
		  	if(size > 10*1024*1024) {
		  		this.$notify.error({
		  			title: '错误',
		  			message: '文件大小超过10M，请重新上传！',
		  		});
		  		return false;
		  	}
		  	// 默认true
		  	return true;
		  },
		  uploadSuccess(res) {
		  	if(res.code === 200) {  // 文件上传成功
		  	console.log(res);
		  	this.formData.videoResources = res.data
		  	console.log(res.data);
		  		this.$notify.success({
		  			title:'成功',
		  			message: '文件上传成功！',
		  		});
		  	} else {
		  		this.uploadError();
		  	}
		  },			 
		  // 文件上传失败
		  uploadError() {
		  	this.$notify.error({
		  		title: '错误',
		  		message: '文件上传失败！',
		  	});
		  },
		  // 文件个数超过限制
		  uploadExceed() {
		  	this.$notify.warning({
		  		title:'提示',
		  		message: '您已添加了一个文件，如需替换，请先删除已添加的文件！',
		  	});
		  },
		  
    }
  })
</script>
<style scoped>
.el-table .el-table__cell:nth-child(1) {  text-align: center;}
 a{color:#409EFF;text-decoration: none;}
</style>
</html>